<template>
    <view class="searchList">
        <view class="t-padded-l-17 t-padded-r-17 top-search">
            <search-input
                @handleSearch = "searchList"
                @input = "change"
                @confirm = "confirm"
                placeholder = "请输入关键字找找看"
                :infoList = "infoList"
                :showValue = "showValue"
                v-model = "searchWord"
                type = "primary"
                :isSimple= "false"
                :uniShadow = "false"
            ></search-input>
        </view>
        <view v-if="showHistory" class="t-padded-l-40 t-padded-r-40">
            <view class=" t-padded-t-40 t-margin-t-20 nav-bar">
                <view>历史记录</view>
                <view @click="clearHistory()" class="t-text-right del">
                    <image src="/static/img/shanchu-copy@2x.png" mode="aspectFit"></image>
                </view>
            </view>
            <view class="tag">
                <template  v-for="(keyword, key) in historyList">
                    <text :key="key" @click="tagSearch(keyword)">{{keyword}}</text>
                </template>
            </view>
            <view class="t-padded-t-40 t-margin-t-20 nav-bar">
                <view>大家都在搜</view>
            </view>
            <view class="recolist">
                <template  v-for="(item, key) in hotSearchList">
                    <view class="box" @click="tagSearch(item.keyword)" :key="key">
                        <view><text>{{key+1}}.</text></view>
                        <view >
                            <text>{{item.keyword}}</text>
                            <text v-if="item.type" class="tip" :class="item.type == 'new' && 'new'">{{item.type|toUpperCase}}</text>
                        </view>
                    </view>
                </template>
            </view>
        </view>
        <view v-if="showNoRes" class="noresult">
            <image mode="aspectFit" src="/static/img/noresult.png"></image>
            <view class="sevice">
                没搜索到？ <button open-type="contact" class="contactus"  type="text">联系客服</button>把你想找的内容告诉我们把
            </view>
        </view>
        <view class="reslist">
            <scroll-view class="swiper-one-list" scroll-y="true" @scrolltolower="loadMore()">
                <view class="my_works">
                    <view class="work_list">
                        <view class="list" v-for="(item,key) in searchResList" :key="key">
                            <view class="list_img" @click="navigateTo('/pages/story/record/index?id='+item.id)">
                                <image style="border-radius: 20upx;" :src=" item.thumb_link.origin+'?x-oss-process=image/resize,m_fill,h_300,w_300' "   class="img"></image>
                            </view>
                            <view class="list_content">
                                <view class="top">
                                    <view class="titles">
                                        <view class="title font-semibold">{{substr(item.title,12)}}</view>
                                    </view>
                                    <view class="des">
                                        <view class="font-light" style="font-size:24upx">
                                            {{item.content.substring(0,12) || ''}}
                                                <!--| {{item.words_count}}字&ndash;&gt;-->
                                        </view>
                                        <navigator :url="'/pages/story/record/index?id='+item.id" open-type="navigate" class="say">
                                            <text class="iconfont play">&#xe61c;</text>
                                            <view class="font-medium">看读</view>
                                        </navigator>
                                    </view>
                                </view>
                                <view class="bottom">
                                    <view class="icon">
                                        <text class="iconfont ren">&#xe629;</text>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <view class="num font-light" style="padding-left: 8upx" >{{showNumber(item.tape_records_count)}}人读过</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
  import Request from '@/utils/request.js'
  import SearchInput from '../../components/searchInput/'
    export default {
        name: "searchList",
        data() {
            return {
                hotSearchList: [],
                historyList: [],
                searchResList: [],
                searchWord: "",
                showNoRes: false,
                showHistory: true,
                page: 1
            }
        },
        onLoad: function(e) {
            this.getHotSearchList()
            uni.getStorage({ // 获取历史记录
                key: 'historyList',
                success: (res) => {
                    this.historyList = res.data || []
                }
            })
        },
        filters: {
            toUpperCase(w){
                return w.toUpperCase()
            }
        },
        methods: {
            navigateTo(url){
                uni.navigateTo( {'url': url} )
            },
            getHotSearchList() {
                Request.get('/tape/search/hot').then((res) => {
                    this.hotSearchList = res.data
                })
            },
            substr(str,length){
                return str.length>length ? str.substring(0, length-1)+'..': str
            },
            showNumber(count){
                return count>99 ? '99+' : count
            },
            searchList(page = 1) {
                if (this.searchWord) {
                    uni.showLoading();
                    Request.get(`/tape/subject?search=${this.searchWord}&page=${page}`).then((res) => {
                        let arr = this.historyList
                            if (res.code == 200) {

                              if (page == 1) {
                                this.searchResList = [];
                                this.showNoRes = this.showHistory = !res.data.length // 显示没有搜索结果
                                arr.push(this.searchWord)
                                this.historyList = Array.from(new Set(arr))

                                uni.setStorage({
                                  key: 'historyList',
                                  data: this.historyList
                                })
                              }

                              res.data.forEach((value)=>{
                                this.searchResList.push(value);
                              })


                            uni.hideLoading();
                        }
                    })
                } else { // 没有值返回
                    this.navigateTo('/pages/index/index')
                }
            },
            tagSearch(w) {
                this.searchWord = w
                this.searchList()
            },
            clearHistory() { // 清除历史
                uni.setStorage({
                    key: 'historyList',
                    data: [],
                    success: (res) => {
                        this.historyList = []
                    }
                })
            },
            loadMore() {
                console.log('正在加载更多数据。。。')
                this.page++
                this.searchList(this.page);
            },
            change(v) {
                if (!v) {
                    this.showNoRes = false
                    this.searchResList = []
                    this.showHistory = true
                }
            },
            confirm() {
                this.searchWord && this.searchList()
            }
        },
        components: {SearchInput}
    }
</script>

<style lang='scss' scoped>
    $theme-font-color: #664E37;
    $tag-font-color: #FCB300;
    $tag-bg-color: #FFF1CD;
    .searchList{
        padding-top: 108upx;
    }
    .top-search{
        position: fixed;
        top: 0;
        background-color: #fff;
        z-index: 11;
    }
    .nav-bar{
        display: grid;
        grid-template-columns: 50% auto;
        font-weight: bold;
        color: $theme-font-color;
        font-size: 30upx;
        line-height: 40upx;
        .del{
            image{
                width: 40upx;
                height: 40upx;
                display: inline-block;
            }
        }
    }
    .tag{
        text{
            font-size: 28upx;
            padding: 10upx 20upx;
            border-radius: 10upx;
            color: $tag-font-color;
            background-color: $tag-bg-color;
            margin-right: 15upx;
            display: inline-block;
            margin-top: 15upx
        }
    }
    .recolist{
        .box{
            display: grid;
            grid-template-columns: auto 98.7%;
            text{
                font-size: 30upx;
                display: inline-block;
                color: $theme-font-color;
            }
            view{
                padding:15px 0;
            }
            .tip{
                color: #fff;
                background-color: #FB6E5B;
                padding: 4upx 12upx;
                border-radius: 5upx;
                margin-left: 15upx;
                box-shadow: 1upx 1upx 5upx #FF5800;
                font-size: 24upx;
                transform: Uppercase !important;
                &.new{
                    background-color: #FCB300;
                    box-shadow: 1upx 1upx 5upx #FFCE00;
                }
            }
        }
    }
    .noresult{
        position: fixed;
        top: 80upx;
        width: 100%;
        height: calc(100% - 80upx);
        background-color: #fff;
        image{
            width: 100%;
            height: 700upx;
            padding-top: 120upx;
        }
        .sevice{
            position: absolute;
            bottom: 0;
            font-size: 30upx;
            text-align: center;
            width: 100%;
            padding-bottom:60upx;
            color: #666;
            .contactus{
                color: #2432B2;
                // font-weight: bold;
                font-size: 30upx;
                text-decoration: underline;
                display: inline;
                border: none;
                background: none;
                padding: 0;
                margin: 0;
                &::after{ border: none;}
            }
        }
    }
    // 搜索到结果
    .swiper-one-list {
        height: calc(100vh - 108upx);
        width: 100%;
    }

    .swiper-one-list .swiper-list-entity {
        width: 100%;
        height: 75upx;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .my_works{
        width: 630upx;
        height: auto;
        margin: 0 auto;
        .my_works_heade{
            display: flex;
            align-items: center;
            padding: 40upx 0;
            .img{
                width: 37upx;
                height: 37upx;
                margin-right:14upx;
            }
            .my_works_title{
                font-size: $uni-font-size-base;
                color: $uni-color-664e37;
            }
        }
        .work_list{
            .list{
                display: flex;
                padding-top: 30upx;
                .list_img{
                    width: $uni-img-size-160;
                    height:  $uni-img-size-160;
                    border-radius: 20upx;
                    overflow: hidden;
                    box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.15);
                    position: relative;
                    .img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .list_content{
                    flex: 1;
                    margin-left: 30upx;
                    padding-top: 0upx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    border-bottom: 2upx solid #f2f2f2;
                    .top{

                        .titles{
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-weight: $font-regular;
                            .title{
                                width: 100%;
                                /*overflow: hidden;*/
                                /*text-overflow:ellipsis;*/
                                /*white-space: nowrap;*/
                                font-weight: 400;
                                font-size: 32upx;
                                color: $uni-color-664e37;
                            }
                        }
                        .des{
                            display: flex;
                            justify-content: space-between;
                            font-size: $uni-font-size-12;
                            color: $uni-color-876a48;
                            .say{
                                width: 145upx;
                                height: 60upx;
                                border-radius: 30upx;
                                background-color: $uni-color-fcb300;
                                color: #fff;
                                font-size: $uni-font-size-13;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 400;
                                .play{
                                    font-size: 30upx;
                                    margin-right:10upx;
                                }
                                .img{
                                    width: 35upx;
                                    height: 33upx;
                                }
                            }
                        }
                    }
                    .bottom{
                        display: flex;
                        box-sizing: border-box;
                        padding-bottom: 35upx;
                        .icon{
                            display: flex;
                            align-items: center;
                            padding-right: 32upx;
                            .ren{
                                color: $uni-color-876a48;
                                font-size: 26upx;
                            }
                            .num{
                                font-size: 26upx;
                                padding-left: 4upx;
                                color: $uni-color-876a48;
                            }
                        }

                    }

                }
            }
        }
    }
</style>
